﻿
<style>
    
    .word-wrap {
        width: 450px;
        margin: 20px auto;
    }
    .word-one {
        float: left;
        width: 120px;
        height: 120px;
        margin: 12px;
        border: 1px solid #c0c0c0;
        border-radius: 10px;
        line-height: 120px;
        text-align: center;
        font-size: 55px;
        font-weight: bold;
        cursor: pointer;
    }
    .word-result {
        border-bottom: 1px solid #c0c0c0;
        height: 35px;
        line-height: 35px;
        font-size: 24px;
        font-weight: bold;
    }
</style>
<div>
    <h1 class="text-center">古诗九宫格</h1>
    <div class="text-center" >
        共做了<span id="spantm">0</span>题，得分<span id="spanResult">0</span>
    </div>
    <div id="wordTable" class="clearfix word-wrap"></div>
</div>

<div class="text-center word-result"></div>
<div class="text-center" style="margin-top: 20px;">
    <button type="button" class="btn btn-primary" id="btnSubmit">
        交卷
    </button>
    <button type="button" class="btn btn-warning" id="clearTxt">
        清空
    </button>
</div>
@section Scripts
{
    <script>
        var result = '';
        var tm = 0, fs = 0;
        $(function() {
            initData();
        });
        $('#btnSubmit').click(function() {
            var word = "";
            $('.word-result > span').each(function(i, it) {
                word += $(it).text();
            });
            tm += 1;
            if (word == result) {
                //alert('回答正确，加一分');
                fs += 1;
            } else {
                //alert('回答错误，减一份');
                fs -= 1;
            }
            updateResultFs();
            initData();

        });
        function updateResultFs() {
            $('#spantm').html(tm);
            $('#spanResult').html(fs);
        }
        $('#clearTxt').click(function() {
            $('.word-result').empty();
        });
        function displayWord(word) {
            var span = $('<span/>').html(word);
            $('.word-result').append(span);
        }
        function initData() {
            $('#wordTable').empty();
            $('.word-result').empty();
            $.post('@Url.Action("ReadData")',
                {},
                function(res) {
                    
                    result = res.line;
                    $(res.randWord).each(function(i, it) {
                        addWord(it);
                    });
                    
                });
        }
        
        function addWord(word) {
            var it = $('<div/>').html(word).addClass('word-one');
            $('#wordTable').append(it);
            it.click(function() {
                displayWord(word);
            });
        }
    </script>
}
